<template>
  <div>
    <el-table
      :data="list"
     border
     :min-height="tabHeight"
     :height="tabHeight"
     style="width: 98%">
       <el-table-column
         prop="insert_time"
         label="添加时间">
       </el-table-column>
       <el-table-column
         prop="id"
         label="渠道ID">
       </el-table-column>
       <el-table-column
         prop="channel_name"
         label="渠道名">
       </el-table-column>
       <el-table-column
         prop="insert_time"
         label="更新时间">
       </el-table-column>
       <el-table-column
        label="操作"
        width="110">
        <template scope="scope">
          <el-button @click.native.prevent="editChannel(scope)" type="text" size="small">编辑</el-button>
          <el-button v-if="deletable" @click.native.prevent="showDeleteChannelDialog(scope)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="温馨提示"
      v-model="dialogVisible"
      size="tiny"
      :before-close="handleClose">
      <span>您确定要删除这条渠道吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDeleteChannel()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { Table, Button, TableColumn, Dialog } from 'element-ui'
  import { mapActions } from 'vuex'
  import N from '../lib/notification'

  export default {
    props: {
      list: {
        type: Array,
        default: []
      },
      tabHeight: {
        type: String | Number
      },
      deletable: {
        type: Boolean,
        default: true
      }
    },
    components: {
      [Table.name]: Table,
      [Button.name]: Button,
      [TableColumn.name]: TableColumn,
      [Dialog.name]: Dialog
    },
    methods: {
      showDeleteChannelDialog (scope) {
        this.dialogVisible = true
        this.deletedRow = scope.row
        console.log(JSON.stringify(scope.row))
      },

      editChannel (scope) {
        this.$emit('editChannel', scope)
      },

      handleClose () {

      },

      confirmDeleteChannel () {
        this.deleteChannel(this.deletedRow).then((response) => {
          if (response.data.errcode === 0) {
            N.notify('success', '删除渠道成功')
            this.$emit('deleteSuccess', this.deletedRow)
          } else {
            N.notify('error', response.data.errmsg)
          }
          this.dialogVisible = false
        }).catch((error) => {
          console.log(error)
          N.notify('error', '系统出错...删除失败...请联系管理员！')
          this.dialogVisible = false
        })
      },
      ...mapActions({
        deleteChannel: 'deleteChannel'
      })
    },
    data () {
      return {
        dialogVisible: false
      }
    }
  }
</script>
